<template>
  <div style="position: relative">
    <div v-if="handleType == 'look'" class="mask"></div>
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
      <a-form-item style="width:50%;padding-right:15px" ref="name" label="暂存点名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入暂存点名称" />
      </a-form-item>
   
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="code"
        label="暂存点编号"
        name="code"
      >
        <a-input
          v-model:value="formState.code"
          placeholder="请输入暂存点编号"
        />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="hospitalDepartId"
        label="所属科室"
        name="hospitalDepartId"
      >
       <a-tree-select
          allowClear
            v-model:value="formState.hospitalDepartId"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="departmentList"
            placeholder="请选择科室"
            tree-default-expand-all
          >
          </a-tree-select>
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="userStaffId"
        label="管理员"
        name="userStaffId"
      >
        <a-select
            allowClear
            style="width: 100%;padding-left:15px"
            v-model:value="formState.userStaffId"
            placeholder="请选择管理员"
          >
            <a-select-option
              v-for="item in userList"
              :key="item.id"
              :value="item.id"
              >{{ item.realName }}</a-select-option
            >
          </a-select>
      </a-form-item>
   
      <a-form-item
        style="width: 30%"
        ref="longitude"
        label="坐标-经度"
        name="longitude"
        required
      >
        <a-input
          style="width: 140px"
          v-model:value="formState.longitude"
          placeholder="经度"
        />
      
      </a-form-item>
      <a-form-item
        style="width: 30%"
        ref="latitude"
        label="坐标-维度"
        name="latitude"
        required
      >
        <a-input
          style="width: 140px"
          v-model:value="formState.latitude"
          placeholder="维度"
        />
      </a-form-item>
      <a-form-item style="width: 30%" label=" ">
        <a-button type="link" @click="handleInnerVisible">
          <template #icon>
            <EnvironmentTwoTone />
          </template>
          地图定位</a-button
        >
      </a-form-item>
     
    </a-form>

    <a-modal
      width="40%"
      v-model:visible="innerVisible"
      title="坐标位置"
      ok-text="确认"
      cancel-text="取消"
      @ok="handleSaveBmap"
    >
      <BMap class="h390" ref="bmap"></BMap>
    </a-modal>
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import { EnvironmentTwoTone } from "@ant-design/icons-vue";
import { hospitalPlaceSave } from "@/api/hospitalPlace";
import BMap from "@/components/BMap/index.vue";
import TreeSelect from "@/components/TreeSelect";
import * as hospitalApi from "@/api/hospital";
import { message } from "ant-design-vue";
import * as department from "@/api/department.js";
import { hospitalDepartList } from "@/api/hospitalDepart.js";
import * as utils from "@/utils/index.js";

const validateCode = (rule, value, callback) => {
  {
    if (!value) {
      callback(new Error("请输入暂存点编号"));
    } else if (value.length > 20) {
      callback(new Error("暂存点编号长度小于20位"));
    } else {
      callback();
    }
  }
};
const validateName = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入暂存点名称"));
  } else if (
    value &&
    !/^[A-Za-z0-9]{1,40}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,20}$/.test(value)
  ) {
    callback(new Error("暂存点名称不超过40个英文字符或20个汉字"));
  } else {
    callback();
  }
};
const validateShortName = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入简称"));
  } else if (
    value &&
    !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
  ) {
    callback(new Error("简称不超过50个英文字符或25个汉字"));
  } else {
    callback();
  }
};
const validateAddress = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入详细地址"));
  } else if (
    value &&
    !/^[A-Za-z0-9]{1,100}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,50}$/.test(value)
  ) {
    callback(new Error("详细地址不超过100个英文字符或者50个汉字"));
  } else {
    callback();
  }
};
// const validatelongitudelatitude =
const validateUserName = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入管理员"));
  } else if (
    value &&
    !/^[A-Za-z0-9]{1,50}$|^[\u4e00-\u9fa5A-Za-z0-9]{1,25}$/.test(value)
  ) {
    callback(new Error("管理员名称不超过50个英文字符或25个汉字"));
  } else {
    callback();
  }
};
const rules = {
  name: [
    {
      required: true,
      validator: validateName,
      trigger: "blur",
    },
  ],

  code: [
    {
      required: true,
      validator: validateCode,
      trigger: "blur",
    },
  ],
  hospitalDepartId:[
     {
      required: true,
      trigger: "change",
    },
  ],
   userStaffId:[
     {
      required: true,
      trigger: "change",
    },
  ],
 
  longitude: [
    {
      required: true,
      message: "请输入经度",
    },
  ],
  latitude: [
    {
      required: true,
      message: "请输入维度",
    },
  ],
  
};

export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  components: {
    TreeSelect,
    BMap,
    EnvironmentTwoTone,
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      id: "",
      name: "", //暂存点名称
      code: "", //暂存点编号
      hospitalDepartId:null,
      userStaffId:null,
      longitude: "", //经度
      latitude: "", //维度
    });

     const userList = ref([]);
     //获取管理员列表数据
    const handleGetUserList = ()=>{
      department.sysUserStaffList({ isPage: false }).then((res) => {
        if (res && res.success) {
          userList.value = res.data;
        }
      });
    }
     // 获取科室数据
    const departmentList = ref([]);
    const getKSData = async () => {
      let res = await hospitalDepartList({
        isPage: false,
        name: "",
      });
      if (res && res.success) {
        let departmentListO = res.data.map((item) => {
          item.label = item.name;
          item.value = item.id;
          return item;
        });
        departmentList.value = utils.treeDataTranslate(departmentListO);
        console.log(123444444);
        console.log(departmentList.value);
      }
    };
    // 地图
    const bmap = ref(null);
    const innerVisible = ref(false);
    // 打开地图
    const handleInnerVisible = () => {
      innerVisible.value = true;
    };
    //获取地图数据
    const handleSaveBmap = (row) => {
      formState.longitude = bmap.value.form.longitude;
      formState.latitude = bmap.value.form.latitude;
      formState.address = bmap.value.form.address;
      innerVisible.value = false;
    };
    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
        };
        console.log(params);
        hospitalPlaceSave(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      getKSData()
      handleGetUserList()
      if (props.handleType == "add") {
        return false;
      }
      console.log(props.handleRow);
      formState.id = props.handleRow.id;
      formState.name = props.handleRow.name;
      formState.code = props.handleRow.code;
       formState.hospitalDepartId = props.handleRow.hospitalDepartId;
      formState.userStaffId = props.handleRow.userStaffId;
       formState.longitude = props.handleRow.longitude;
        formState.latitude = props.handleRow.latitude;
     

    });

    return {
      formRef,
      handleType,
      wrapperCol: {
        span: 0,
      },
      formState,
     
      rules,

      handleInnerVisible,
      innerVisible,
      handleSaveBmap,
      bmap,

      handleSave,
      resetForm,

      // 科室数据
      departmentList,
      // 管理员数据
      userList,
    };
  },
});
</script>
<style lang="scss" scoped>
.mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
}
</style>